<template>
  <div :class="{ 'is-detail': isDetail }">
    <el-form
      v-for="(item, index) in ruleList"
      :key="index"
      ref="ruleForm"
      :inline="true"
      :model="item"
      style="margin-bottom: 16px"
      :rules="rules"
    >
      <el-form-item prop="nodeDate">
        <el-date-picker v-model="item.nodeDate" type="date" placeholder="选择日期" size="small" class="input-item">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="status">
        <el-select v-model="item.status" placeholder="请选择状态" size="small" class="input-item">
          <el-option v-for="sitem in statusList" :key="sitem" :label="sitem" :value="sitem"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="condition">
        <el-select v-model="item.condition" placeholder="请选择判断条件" size="small" class="input-item">
          <el-option label="大于等于" value="大于等于"></el-option>
          <el-option label="两值之间" value="两值之间"></el-option>
          <el-option label="小于等于" value="小于等于"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="item.condition">
        <el-form-item v-if="item.condition !== '小于等于'" prop="leftValue">
          <el-input
            v-model="item.leftValue"
            placeholder="请输入左值"
            type="number"
            size="small"
            class="input-item"
          ></el-input>
        </el-form-item>
        <el-form-item>
          {{ item.condition !== '小于等于' ? '≤' : '' }} 当前值 {{ item.condition !== '大于等于' ? '≤' : ' ' }}
        </el-form-item>
        <el-form-item v-if="item.condition !== '大于等于'" prop="rightValue">
          <el-input
            v-model="item.rightValue"
            placeholder="请输入右值"
            type="number"
            size="small"
            class="input-item"
          ></el-input>
        </el-form-item>
      </template>
      <el-form-item v-if="ruleList.length > 1 && !isDetail">
        <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delRule(index)"></el-button>
      </el-form-item>
    </el-form>
    <el-button v-if="!isDetail" style="margin-top: 8px" @click="addRule">添加规则</el-button>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: {
    data: {
      type: String,
      default: '',
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleList: [{ nodeDate: '', condition: '', leftValue: '', rightValue: '', status: '' }],
      rules: {
        nodeDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
        condition: [{ required: true, message: '请选择条件', trigger: 'change' }],
        leftValue: [{ required: true, message: '请输入左值', trigger: 'blur' }],
        rightValue: [{ required: true, message: '请输入右值', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    }
  },
  computed: {
    statusList() {
      let list = ['正常', '有风险', '未完成', '完成']
      let ruleList = this.ruleList.map((item) => item.status)
      return list.filter((item) => !ruleList.includes(item))
    },
  },
  mounted() {
    if (this.data) {
      this.ruleList = JSON.parse(this.data)
    }
  },
  methods: {
    addRule() {
      this.ruleList.push({ nodeDate: '', condition: '', leftValue: '', rightValue: '', status: '' })
    },
    delRule(index) {
      if (this.ruleList.length === 1) {
        this.$message.warning('最少保留一条规则')
      } else {
        this.$confirm('确定删除吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.ruleList.splice(index, 1)
        })
      }
    },
    submit() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.forEach((item) => {
          item.validate((valid) => {
            if (!valid) resolve(false)
            return
          })
        })
        resolve(this.ruleList.map((item) => ({ ...item, nodeDate: moment(item.nodeDate).format('YYYY-MM-DD') })))
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.input-item {
  width: 120px !important;
}
.is-detail {
  pointer-events: none;
}

.avue-form .el-date-editor.el-input {
  width: 150px !important;
}
</style>
